<template>
  <div class="regWrapper">
    <div>"2019-11-18" 格式验证---- {{ showDate }}</div>
    <div>"2019年11月17日" 格式验证---- {{ testYMD }}</div>
    <button @click="testDate">点击验证</button>
    <button @click="testDate">年月日</button>

    <div>
      <Input v-model="value"
             placeholder="请输入手机号码"
             style="width: 200px" />
      <Button @click="checkPhpne">搜索</Button>
      <span v-if="success"
            style="color:red;">{{ success }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: "2019-11-18",
      date1: "2019年11月17日",
      showDate: "",
      testYMD: "",
      value: "",
      success: ""
    };
  },
  methods: {
    // 1. 校验基本日期格式
    testDate () {
      var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}(\-|\/|\.)\d{1,2}$/;
      var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;
      if (reg1.test(this.date) === true) {
        this.showDate = "验证成功";
      }
      if (reg2.test(this.date1)) {
        this.testYMD = "true";
      }
    },
    checkPhpne () {
      console.log(this.value);
      let phone = this.value;
      var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (reg.test(phone) === true) {
        this.success = "手机号码正确"
      } else {
        console.log("cuowu")
      }
    }
  }
};
</script>

<style scoped></style>
